<title>information显示页面</title>
{% extends "base.html" %}
{% block content %}
{% load staticfiles %}

<style>
.myright{ float:right; width:300px;float:right;}
</style>
<script>
    function check(name)
    {
      var nameValue1=document.getElementById(name).value;
     if (nameValue1=="")
     {
         alert(name+"值不能为空")
          return false;
      }
      return true;
    }

</script>

<div class="myright">
 <form action="/information_show/api_search" method="post" accept-charset="UTF-8" onsubmit="return check('searchname1');">
        {% csrf_token %}
        <input type="text" name="searchname1" id="searchname1">
        <input type="submit" value="搜索" id="Search_q1">
  </form>
</div>

<div style="float:right;">
 <form action="/information_action/api_msg2_excel" method="get" accept-charset="UTF-8">
        <button value="导出表格" id="Search_q1">导出表格</button>
  </form>
</div>

<div class="container">
<table class="table table-hover table-bordered" >   
    <thead>
        <tr>   
            <th>系统类型</th>  
            <th>连接内容</th>
            <th>管理</th> 
        </tr>
        </thead>
     
        {% for item in data %}  
            <tr>             
                <td>{{ item.name }}</td>  
                <td><a href = {{ item.url }} target='_blank'>{{ item.url }}</a></td>
                <td>
                <button type="button" class="btn btn-info" data-toggle="modal" onclick="return get_edit_info({user_id})" data-target="#addUserModal">编辑</button>
                &nbsp;&nbsp;
                <button type="button" class="btn btn-danger" onclick="return delete_info({id})">删除</button>                
                </td>
            </tr>  
        {% endfor %}
 
    <!-- 模态框示例（Modal） -->
    <form method="post" action="" class="form-horizontal" role="form" id="form_data" onsubmit="return check_form()" style="margin: 20px;">
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                                                                                     系统信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="user_id" class="col-sm-3 control-label">系统类型</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="user_id" name="user_id" value="{api_id}"
                                       placeholder="请输入系统类型">
                            </div>
                        </div>
                       
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label">系统名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="user_name" value="" id="user_name"
                                       placeholder="系统名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-3 control-label">地址</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="address" value="" id="address"
                                       placeholder="地址">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="remark" class="col-sm-3 control-label">备注</label>
                            <div class="col-sm-9">
                                <textarea  class="form-control"  name="remark" value="{remark}" id="remark"
                                       placeholder="备注">

                                </textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary">
                                                                                         提交
                    </button><span id="tip"> </span>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    </form>
    
    <ul class="pagination" id="pager">
        {#上一页按钮开始#}
        {# 如果当前页有上一页#}
        {% if data.has_previous %}
            {#  当前页的上一页按钮正常使用#}
            <li class="previous"><a href="/information_show/?page={{ data.previous_page_number }}">上一页</a></li>
        {% else %}
            {# 当前页的不存在上一页时,上一页的按钮不可用#}
            <li class="previous disabled"><a href="#">上一页</a></li>
        {% endif %}
        {#上一页按钮结束#}
        {# 页码开始#}
        {% for num in paginator.page_range %}
            {% if num == currentPage %}
                <li class="item active"><a href="/information_show/?page={{ num }}">{{ num }}</a></li>
            {% else %}
                <li class="item"><a href="/information_show/?page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}
        {#页码结束#}
        {# 下一页按钮开始#}
        {% if data.has_next %}
            <li class="next"><a href="/information_show/?page={{ data.next_page_number }}">下一页</a></li>
        {% else %}
            <li class="next disabled"><a href="#">下一页</a></li>
        {% endif %}
        {# 下一页按钮结束#}
    </ul> 
    </table>
</div>  
{% endblock %}  